// 电影胶片轮播API数据格式要求：
// [
//   {
//     title: '电影名',
//     rating: 9.0,
//     year: 2024,
//     director: '导演名',
//     genre: '类型',
//     intro: '简介...',
//     poster: '/static/images/movies/xxx.webp' // 推荐用绝对路径或完整URL
//   },
//   ...
// ]
// 如果API可用则优先显示API数据，否则显示默认数据

const apiUrl = '/api/top50movies'; // 你可以将此处替换为你的实际API接口

// 当DOM加载完成后执行初始化函数
document.addEventListener('DOMContentLoaded', function() {
    // 创建style标签用于注入CSS样式
    const style = document.createElement('style');
    // 定义所有需要的CSS样式
    style.textContent = `
        /* 电影轮播容器样式 */
        .film-reel-container {
            width: 100%;              /* 容器宽度占满父元素 */
            height: 75%;              /* 容器高度为父容器的80% */
            position: relative;        /* 相对定位，作为子元素的定位参考 */
            overflow: hidden;          /* 隐藏超出容器的内容 */
            background: #080b30;       /* 深蓝色半透明背景 */
            border-radius: 10px;       /* 圆角边框 */
            display: flex;             /* 弹性布局 */
            align-items: center;       /* 垂直居中对齐 */
            justify-content: center;   /* 水平居中对齐 */
            margin: auto;             /* 水平居中 */
        }
        /* 电影轮播区域样式 */
        .film-reel {
            position: relative;        /* 相对定位 */
            width: 100%;              /* 宽度占满容器 */
            height: 100%;             /* 高度占满容器 */
            display: flex;             /* 弹性布局 */
            align-items: center;       /* 垂直居中对齐 */
            justify-content: center;   /* 水平居中对齐 */
            will-change: transform;    /* 优化transform变换的性能 */
            max-height: 100%;          /* 确保不超过父容器高度 */
        }
        /* 单个电影项样式 */
        .movie-item {
            position: absolute;
            height: 100%;
            aspect-ratio: 2/3;      /* 推荐2:3比例 */
            width: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0.6;
            z-index: 1;
        }
        .movie-item.active {
            opacity: 1;
            z-index: 2;
        }
        .movie-poster {
            width: 100%;
            aspect-ratio: 2/3;
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            background: #222;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .movie-poster img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: opacity 0.3s; /* 添加加载过渡效果 */
        }
        /* 电影排名样式 */
        .movie-rank {
            position: absolute;        /* 绝对定位 */
            top: 30px;                /* 距离顶部10px */
            left: 10px;               /* 距离左侧10px */
            background: rgba(0, 0, 0, 0.7);  /* 半透明黑色背景 */
            color: #ffbb44;           /* 金色文字 */
            padding: 4px 8px;         /* 内边距 */
            border-radius: 4px;        /* 圆角 */
            font-weight: bold;         /* 粗体 */
            font-size: 14px;          /* 字体大小 */
            z-index: 2;               /* 确保显示在海报上方 */
        }
        /* 电影信息区域样式 */
        .movie-info {
            position: absolute;
            left: 0;
            width: 100%;
            bottom: 6%; /* 距离底部10% */
            background: rgba(0,0,0,0.7);
            color: #fff;
            font-size: 15px;
            border-radius: 0 0 8px 8px;
            padding: 6px 0 4px 0;
            text-align: center;
            box-sizing: border-box;
            z-index: 2;
            pointer-events: none; /* 避免遮挡点击 */
        }
        .movie-title {
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .movie-rating {
            color: #ffd700;
            font-size: 14px;
        }
        /* 导航按钮基础样式 */
        .nav-button {
            position: absolute;        /* 绝对定位 */
            top: 50%;                 /* 垂直居中 */
            transform: translateY(-50%);  /* 垂直居中微调 */
            width: 40px;              /* 按钮宽度 */
            height: 40px;             /* 按钮高度 */
            background: rgba(255, 255, 255, 0.2);  /* 白色半透明背景 */
            border: none;             /* 无边框 */
            border-radius: 50%;        /* 圆形按钮 */
            color: white;             /* 文字颜色 */
            font-size: 20px;          /* 文字大小 */
            cursor: pointer;           /* 鼠标指针样式 */
            z-index: 3;               /* 置于最顶层 */
            transition: background 0.3s;  /* 背景色过渡动画 */
            display: flex;             /* 弹性布局 */
            align-items: center;       /* 垂直居中 */
            justify-content: center;   /* 水平居中 */
        }
        /* 导航按钮悬停效果 */
        .nav-button:hover {
            background: rgba(255, 255, 255, 0.3);  /* 悬停时背景色加深 */
        }
        /* 上一个按钮位置 */
        .nav-button.prev { left: 20px; }
        /* 下一个按钮位置 */
        .nav-button.next { right: 20px; }
        /* 模态框样式 */
        .movie-modal {
            position: fixed;           /* 固定定位 */
            top: 0;                   /* 顶部对齐 */
            left: 0;                  /* 左侧对齐 */
            width: 100%;              /* 宽度占满窗口 */
            height: 100%;             /* 高度占满窗口 */
            background: rgba(0, 0, 0, 0.8);  /* 黑色半透明背景 */
            display: flex;             /* 弹性布局 */
            justify-content: center;   /* 水平居中 */
            align-items: center;       /* 垂直居中 */
            z-index: 1000;            /* 最高层级 */
        }
        /* 模态框内容区域样式 */
        .modal-content {
            background: #0d1a2d;       /* 深蓝色背景 */
            border-radius: 10px;       /* 圆角边框 */
            padding: 20px;            /* 内边距 */
            width: 80%;              /* 宽度80% */
            max-width: 800px;         /* 最大宽度 */
            max-height: 90vh;         /* 最大高度 */
            overflow-y: auto;          /* 垂直滚动 */
            position: relative;        /* 相对定位 */
            color: white;             /* 文字颜色 */
            box-shadow: 0 0 20px rgba(20, 200, 253, 0.3);  /* 发光效果 */
        }
        /* 关闭按钮样式 */
        .close-button {
            position: absolute;        /* 绝对定位 */
            right: 20px;              /* 右侧间距 */
            top: 20px;               /* 顶部间距 */
            font-size: 24px;          /* 文字大小 */
            cursor: pointer;           /* 鼠标指针样式 */
            color: #fff;              /* 文字颜色 */
            transition: color 0.3s;    /* 颜色过渡动画 */
        }
        /* 关闭按钮悬停效果 */
        .close-button:hover {
            color: #14c8fd;           /* 悬停时变为蓝色 */
        }
        /* 模态框头部样式 */
        .modal-header {
            margin-bottom: 20px;       /* 底部间距 */
            padding-right: 30px;       /* 右侧内边距 */
        }
        /* 模态框标题样式 */
        .modal-header h2 {
            margin: 0;                /* 清除外边距 */
            color: #14c8fd;           /* 蓝色标题 */
        }
        /* 模态框主体样式 */
        .modal-body {
            display: flex;             /* 弹性布局 */
            gap: 20px;                /* 元素间距 */
            align-items: flex-start;  /* 顶部对齐 */
        }
        /* 模态框图片样式 */
        .modal-body img {
            width: 200px;             /* 图片宽度 */
            height: 300px;            /* 图片高度 */
            object-fit: cover;         /* 图片填充方式 */
            border-radius: 8px;        /* 圆角边框 */
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);  /* 阴影效果 */
            transition: opacity 0.3s; /* 添加加载过渡效果 */
        }
        /* 电影详情区域样式 */
        .movie-details {
            flex: 1;                  /* 占据剩余空间 */
        }
        /* 电影详情文本样式 */
        .movie-details p {
            margin: 10px 0;           /* 上下外边距 */
            line-height: 1.6;         /* 行高 */
        }
        /* 评分样式 */
        .rating {
            color: #ffd700;           /* 金色评分 */
            font-size: 18px;          /* 文字大小 */
            margin-top: 5px;          /* 顶部外边距 */
        }
    `;
    // 将样式添加到文档头部
    document.head.appendChild(style);

    // 获取中间区域容器元素
    const container = document.getElementById('center3');
    // 创建轮播所需的HTML结构
    container.innerHTML = `
        <div class="film-reel-container">
            <div class="film-reel"></div>
        </div>
    `;

    // 获取轮播相关DOM元素
    const filmReel = container.querySelector('.film-reel');
    const filmReelContainer = container.querySelector('.film-reel-container');
    // 当前显示的电影索引
    let currentIndex = 0;
    // 是否正在执行动画的标志
    let isAnimating = false;
    
    // 创建默认海报
    function createDefaultPoster() {
        const canvas = document.createElement('canvas');
        canvas.width = 400;
        canvas.height = 600;
        const ctx = canvas.getContext('2d');

        // 生成随机渐变色
        function getRandomColor() {
            const colors = [
                ['#2C3E50', '#3498DB'],  // 深蓝渐变
                ['#8E44AD', '#9B59B6'],  // 紫色渐变
                ['#2980B9', '#3498DB'],  // 蓝色渐变
                ['#16A085', '#1ABC9C'],  // 绿色渐变
                ['#D35400', '#E67E22'],  // 橙色渐变
                ['#27AE60', '#2ECC71'],  // 翠绿渐变
                ['#C0392B', '#E74C3C']   // 红色渐变
            ];
            return colors[Math.floor(Math.random() * colors.length)];
        }

        // 创建渐变背景
        const colors = getRandomColor();
        const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
        gradient.addColorStop(0, colors[0]);
        gradient.addColorStop(1, colors[1]);
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 添加电影胶片效果
        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
        for (let i = 0; i < canvas.height; i += 20) {
            ctx.fillRect(0, i, canvas.width, 2);
        }

        // 添加播放图标
        ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
        ctx.beginPath();
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        const radius = 40;
        ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
        ctx.fill();

        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
        ctx.beginPath();
        ctx.moveTo(centerX - 15, centerY - 20);
        ctx.lineTo(centerX + 25, centerY);
        ctx.lineTo(centerX - 15, centerY + 20);
        ctx.closePath();
        ctx.fill();

        // 添加文字
        ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
        ctx.font = 'bold 24px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('电影海报', centerX, centerY);
        ctx.font = '18px Arial';
        ctx.fillText('加载中...', centerX, centerY);

        // 添加装饰边框
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
        ctx.lineWidth = 4;
        ctx.strokeRect(10, 10, canvas.width - 20, canvas.height - 20);

        // 转换为base64图片
        return canvas.toDataURL('image/webp', 0.9);
    }

    // 生成默认海报数据URL
    const defaultPosterUrl = createDefaultPoster();

    // 初始电影数据
    let movies = [
        {
            title: '示例电影1',
            rating: 9.0,
            year: 2024,
            director: '导演名称',
            genre: '剧情',
            intro: '这是一个示例电影简介...',
            poster: defaultPosterUrl
        },
        {
            title: '示例电影2',
            rating: 8.5,
            year: 2024,
            director: '导演名称',
            genre: '动作',
            intro: '这是另一个示例电影简介...',
            poster: defaultPosterUrl
        },
        {
            title: '示例电影3',
            rating: 8.0,
            year: 2024,
            director: '导演名称',
            genre: '科幻',
            intro: '这是第三个示例电影简介...',
            poster: defaultPosterUrl
        },
        {
            title: '示例电影4',
            rating: 8.0,
            year: 2024,
            director: '导演名称',
            genre: '科幻',
            intro: '这是第三个示例电影简介...',
            poster: defaultPosterUrl
        },
        {
            title: '示例电影5',
            rating: 8.0,
            year: 2024,
            director: '导演名称',
            genre: '科幻',
            intro: '这是第三个示例电影简介...',
            poster: defaultPosterUrl
        }
    ];

    // 尝试从API获取电影数据
    async function fetchMovieData() {
        console.log('Fetching movie data from API...');
        try {
            const response = await fetch(apiUrl);
            console.log('API response received:', response.status, response.statusText);
            if (!response.ok) {
                throw new Error(`API请求失败：${response.status}`);
            }
            const result = await response.json();
            console.log('API数据解析成功:', result);

            // 兼容数组格式或包含"data"字段的响应
            const movieArr = Array.isArray(result) ? result : result.data || [];
            
            if (movieArr.length > 0) {
                // 截取前50条数据
                movies = movieArr.slice(0, 50).map(movie => ({
                    ...movie,
                    // 统一处理海报URL（强制通过代理加载外部图片）
                    poster: movie.poster 
                        ? (movie.poster.startsWith('http') || movie.poster.startsWith('https') 
                            ? `/api/proxy-image?url=${encodeURIComponent(movie.poster)}` 
                            : movie.poster // 保留本地路径（如/static开头）
                          ) 
                        : defaultPosterUrl // 无海报时用默认图
                }));
                console.log('处理后电影数据:', movies);
                initializeFilmReel();
            } else {
                console.warn('API返回空数据，使用默认数据');
            }
        } catch (error) {
            console.error('API请求失败:', error.message);
            console.log('使用默认数据');
        }
    }

    // 创建上一个按钮
    const prevButton = document.createElement('button');
    prevButton.className = 'nav-button prev';
    prevButton.innerHTML = '❮';
    filmReelContainer.appendChild(prevButton);

    // 创建下一个按钮
    const nextButton = document.createElement('button');
    nextButton.className = 'nav-button next';
    nextButton.innerHTML = '❯';
    filmReelContainer.appendChild(nextButton);

    // 创建单个电影元素的函数
    function createMovieElement(movie, index) {
        const movieItem = document.createElement('div');
        movieItem.className = 'movie-item';
        movieItem.dataset.index = index; // 存储索引方便事件处理

        // 海报容器
        const posterContainer = document.createElement('div');
        posterContainer.className = 'movie-poster';

        // 排名标签（如果有rank字段）
        if (movie.rank) {
            const rankDiv = document.createElement('div');
            rankDiv.className = 'movie-rank';
            rankDiv.textContent = `No.${movie.rank}`;
            posterContainer.appendChild(rankDiv);
        }

        // 海报图片
        const posterImg = document.createElement('img');
        posterImg.alt = `电影海报：${movie.title}`;
        posterImg.src = defaultPosterUrl; // 初始默认图
        posterImg.style.opacity = 0; // 初始透明，加载后渐显

        // 图片加载逻辑
        const loadImage = new Image();
        loadImage.src = movie.poster;
        loadImage.onload = () => {
            posterImg.src = movie.poster;
            posterImg.style.opacity = 1; // 加载完成后渐显
        };
        loadImage.onerror = (error) => {
            console.error(`图片加载失败：${movie.poster}`, error);
            posterImg.src = defaultPosterUrl; // 失败则显示默认图
            posterImg.style.opacity = 1; // 显示默认图
        };

        posterContainer.appendChild(posterImg);

        // 电影信息层
        const infoDiv = document.createElement('div');
        infoDiv.className = 'movie-info';
        infoDiv.innerHTML = `
            <div class="movie-title">${movie.title}</div>
            <div class="movie-rating">★ ${movie.rating.toFixed(1)}</div>
        `;
        posterContainer.appendChild(infoDiv);

        movieItem.appendChild(posterContainer);

        // 点击事件：打开模态框
        movieItem.addEventListener('click', () => showMovieDetails(movie));

        // 鼠标悬停高亮当前项
        movieItem.addEventListener('mouseenter', () => {
            if (!isAnimating) {
                currentIndex = index;
                updateCarousel();
            }
        });

        return movieItem;
    }

    // 显示电影详情的函数
    function showMovieDetails(movie) {
        const modal = document.createElement('div');
        modal.className = 'movie-modal';
        modal.innerHTML = `
            <div class="modal-content">
                <span class="close-button">&times;</span>
                <div class="modal-header">
                    <h2>${movie.title}</h2>
                    <div class="rating">★ ${movie.rating.toFixed(1)}</div>
                </div>
                <div class="modal-body">
                    <div class="movie-poster-modal">
                        <img src="${defaultPosterUrl}" alt="${movie.title}" />
                    </div>
                    <div class="movie-details">
                        ${movie.rank ? `<p><strong>排名：</strong> No. ${movie.rank}</p>` : ''}
                        <p><strong>导演：</strong> ${movie.director}</p>
                        <p><strong>年份：</strong> ${movie.year}</p>
                        <p><strong>类型：</strong> ${movie.genre}</p>
                        <p><strong>简介：</strong> ${movie.intro}</p>
                    </div>
                </div>
            </div>
        `;

        // 加载模态框图片
        const modalImg = modal.querySelector('.movie-poster-modal img');
        const img = new Image();
        img.src = movie.poster;
        img.onload = () => modalImg.src = movie.poster;
        img.onerror = () => modalImg.src = defaultPosterUrl;

        // 关闭事件
        modal.querySelector('.close-button').addEventListener('click', () => modal.remove());
        modal.addEventListener('click', (e) => e.target === modal && modal.remove());

        document.body.appendChild(modal);
    }

    // 更新轮播位置的函数
    function updateCarousel(immediate = false) {
        if (isAnimating && !immediate) return;
        isAnimating = true;

        const items = Array.from(filmReel.children);
        if (items.length === 0) return;

        const itemWidth = items[0].offsetWidth;
        const activeScale = 1.2;
        const gap = itemWidth * 0.2; // 间距调整为宽度20%

        items.forEach((item, index) => {
            const offset = index - currentIndex;
            const scale = index === currentIndex ? activeScale : 1;
            const x = offset * (itemWidth + gap); // 水平偏移计算
            const transform = `translateX(${x}px) scale(${scale}) translateY(-50%)`;

            item.style.transform = transform;
            item.style.opacity = index === currentIndex ? 1 : 0.6;
            item.classList.toggle('active', index === currentIndex);
        });

        setTimeout(() => { isAnimating = false; }, 500);
    }

    // 处理导航的函数
    function handleNavigation(direction) {
        if (isAnimating) return;
        currentIndex = direction === 'prev' 
            ? (currentIndex - 1 + movies.length) % movies.length 
            : (currentIndex + 1) % movies.length;
        updateCarousel();
    }

    // 初始化轮播的函数
    function initializeFilmReel() {
        filmReel.innerHTML = ''; // 清空旧内容

        // 创建所有电影项
        movies.forEach((movie, index) => {
            const movieItem = createMovieElement(movie, index);
            filmReel.appendChild(movieItem);
        });

        // 初始化位置
        updateCarousel(true);
        startAutoPlay();
    }

    // 自动播放逻辑
    let autoPlayTimer = null;
    function startAutoPlay() {
        autoPlayTimer = setInterval(() => {
            handleNavigation('next');
        }, 5000);
    }
    function stopAutoPlay() {
        clearInterval(autoPlayTimer);
    }
    filmReelContainer.addEventListener('mouseenter', stopAutoPlay);
    filmReelContainer.addEventListener('mouseleave', startAutoPlay);

    // 键盘导航
    document.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
            e.preventDefault();
            handleNavigation(e.key === 'ArrowLeft' ? 'prev' : 'next');
        }
    });

    // 窗口Resize处理
    let resizeTimer = null;
    window.addEventListener('resize', () => {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(() => {
            const center3Height = document.getElementById('center3').offsetHeight;
            filmReelContainer.style.height = `${center3Height * 0.8}px`;
            updateCarousel(true);
        }, 100);
    });

    // 初始化流程
    initializeFilmReel();
    fetchMovieData(); // 加载API数据
});            